<template>
    <!-- 排行榜 -->
    <div id="inRank">
        <Nav></Nav>
        <div class="rank">
            <el-container>
                <el-aside width="150px">
                    <div class="list">
                        <!-- <div class="pinnacleList">
                            <div>巅峰榜</div>
                            <div class="songList">
                                <router-link :to="{path:'/'}">新歌榜</router-link>
                            </div>
                            <div class="songList">
                                <router-link to="">热歌榜</router-link>
                            </div>
                        </div> -->
                        <!-- <div class="pinnacleList">
                            <div>地区榜</div>
                            <div class="songList">
                                <router-link to="">内陆榜</router-link>
                            </div>
                            <div class="songList">
                                <router-link to="">台湾榜</router-link>
                            </div>
                            <div class="songList">
                                <router-link to="">欧美榜</router-link>
                            </div>
                            <div class="songList">
                                <router-link to="">内陆榜</router-link>
                            </div>
                            <div class="songList">
                                <router-link to="">韩国榜</router-link>
                            </div>
                        </div> -->
                        <div class="pinnacleList">
                            <el-col>
                                <el-menu default-active="2" class="el-menu-vertical-demo">
                                    <div>巅峰榜</div>
                                    <el-menu-item index="1" class="ban">
                                        <router-link :to="{
                                            path: '/list',
                                            query: { url: 'listens/newSongs',regionID:'新歌' }
                                        }">
                                            新歌榜
                                        </router-link>
                                    </el-menu-item>
                                    <el-menu-item index="2" class="ban">
                                        <router-link :to="{
                                            path: '/list',
                                            query: { url: 'listens/recommends',regionID:'热歌' }
                                        }">
                                            热歌榜
                                        </router-link>
                                    </el-menu-item>
                                    <div>地区榜</div>
                                    <el-menu-item index="3" class="ban">
                                        <router-link :to="{
                                            path: '/list',
                                            query: { url: 'listens/recommends',regionID:'内陆' }
                                        }">
                                            内陆榜
                                        </router-link>
                                    </el-menu-item>
                                    <el-menu-item index="4" class="ban">
                                        <router-link :to="{
                                            path: '/list',
                                            query: { url: 'listens/recommends',regionID:'欧美' }
                                        }">
                                            欧美榜
                                        </router-link>
                                    </el-menu-item>
                                    <el-menu-item index="5" class="ban">
                                        <router-link :to="{
                                            path: '/list',
                                            query: { url: 'listens/recommends',regionID:'台湾' }
                                        }">
                                            台湾榜
                                        </router-link>
                                    </el-menu-item>
                                    <el-menu-item index="6" class="ban">
                                        <router-link :to="{
                                            path: '/list',
                                            query: { url: 'listens/recommends',regionID:'港澳' }
                                        }">
                                            港澳榜
                                        </router-link>
                                    </el-menu-item>
                                    <el-menu-item index="7" class="ban">
                                        <router-link :to="{
                                            path: '/list',
                                            query: { url: 'listens/recommends',regionID:'韩国'}
                                        }">
                                            韩国榜
                                        </router-link>
                                    </el-menu-item>
                                </el-menu>
                            </el-col>
                        </div>
                    </div>
                </el-aside>
                <el-main>
                    <router-view regionID="新歌" url="listens/newSongs"/>
                </el-main>
            </el-container>
        </div>
        <Footer></Footer>
    </div>
</template>

<script>
import Nav from "../components/nav.vue";
import Footer from "../components/footer.vue";
export default {
    data() {
        return {
            // isCollapse: false
        };
    },
    methods: {
        handleOpen(key, keyPath) {
            console.log(key, keyPath);
        },
        handleClose(key, keyPath) {
            console.log(key, keyPath);
        }
    },
    components: {
        Nav,
        Footer
    },

};
</script>

<style scoped>
#inRank .rank .list .pinnacleList /deep/ .ban:hover {
    cursor: pointer;
    background-color: plum;
}
</style>

<style>
#inRank {
    text-align: center;
    margin: 0px;
    padding: 0px;
}

#inRank .rank {
    width: 80%;
    margin: 20px auto;
    background: #fafafa;
}

#inRank .rank .list {
    border: 5px solid #e7e7e7;
    margin: 20px auto;
}

#inRank .rank .list .pinnacleList {
    width: 80%;
    margin: 10px auto;
}

#inRank .rank .list .pinnacleList div {
    font-size: 20px;
    border-bottom: 1px solid #d8d8d8;
    padding: 10px;
}

#inRank .rank .list .pinnacleList .songList {
    border-bottom: none;
}

#inRank .rank .list .pinnacleList a {
    font-size: 17px;
    text-decoration: none;
    color: black;
}

/* 布局 */
.el-header,
.el-footer {
    background-color: #B3C0D1;
    color: #333;
    text-align: center;
    line-height: 60px;
}

/* .el-aside {
    background-color: #D3DCE6;
    color: #333;
    text-align: center;
}

.el-main {
    background-color: #E9EEF3;
    color: #333;
    text-align: center;
} */

body>.el-container {
    margin-bottom: 40px;
}

.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
    line-height: 260px;
}

.el-container:nth-child(7) .el-aside {
    line-height: 320px;
}

.el-col-24 {
    float: none;
}

.el-menu-vertical-demo {
    border: none
}

/* .el-menu-item {
    background: #fafafa;
    border: none;
} */


</style>